<template>
  <div class="p-10">
    <el-tabs type="card">
      <el-tab-pane>
        <template #label>
          <span>
            <!-- <el-icon><calendar /></el-icon> -->
            <span>行业资讯</span>
          </span>
        </template>
        <newsTips :newTipsInfo="newTipsInfo" v-if="isShowTips" />
      </el-tab-pane>
      <el-tab-pane label="用卡知识">
        <Cards :cardInfo="cardInfo" v-if="isShowCard"
      /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { Calendar } from "@element-plus/icons-vue";
import { getCardList, getNewsTips } from "@/api/news";

const cardInfo = ref({});
const newTipsInfo = ref({});
const isShowCard = ref(false);
const isShowTips = ref(false);
const getNewTipsInfo = () => {
  getNewsTips().then((res) => {
    newTipsInfo.value = res.data.list[0];
    isShowTips.value = true;
  });
};
const getCardInfo = () => {
  getCardList().then((res) => {
    console.log("cardList", res);
    isShowCard.value = true;
    cardInfo.value = res.data.list;
  });
};

onMounted(() => {
  getCardInfo();
  getNewTipsInfo();
});
</script>
<style lang="scss" scoped>
:deep(.el-tabs__item.is-active) {
  color: red !important;
}

:deep(.el-tabs__item:hover) {
  color: red !important;
}
:deep(.el-tabs__active-bar) {
  background-color: red;
}
</style>
